doctype html
html(ng-app='indexApp')
	head
		meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
		meta(name='viewport', content='width=device-width, initial-scale=1')
		title
		link(rel='stylesheet', type='text/css', href='/lib//bootstrap/dist/css/bootstrap.min.css')
		link(rel='stylesheet', type='text/css', href='/css/index.css')
		script(src='/lib/jquery/dist/jquery.min.js')
		script(src='/lib/moment/min/moment.min.js')
		script(src='/lib//bootstrap/dist/js/bootstrap.min.js')
		script(src='/lib//bootstrap/js/tab.js')
		script(src='/lib/angular/angular.min.js')
		script(src='/js/index.js')
	body(ng-controller='pageCtrl as vm')
		.container
			.page-header
				h1
					| 接口测试
					small
			.panel.panel-primary
				.panel-heading
					| 请求端设置
					a.pull-right(style='color:white;', data-toggle='collapse', href='#request')
						span.glyphicon.glyphicon-minus.pull-right
				#request.panel-collapse.collapse.in.panel-body
					form#form.form-horizontal(role='form', ng-submit='vm.request()')
						.form-group
							.col-md-2.text-right
								label.control-label(for='url') 接口地址：
							.col-md-10.input-group
								span.input-group-addon
									select(name='method', ng-model='vm.method')
										option(value='GET') GET
										option(value='POST') POST
										option(value='DELETE') DELETE
										option(value='PUT') PUT
										option(value='PATCH') PATCH
									select(name='protocol', ng-model='vm.protocol')
										option(value='http://') http://
										option(value='https://') https://
								input.form-control(type='text', name='url', placeholder='请输入接口地址', required='required', ng-model='vm.url', ng-blur='vm.setUrl()')
						ul.nav.nav-tabs.nav-pills(role='tablist')
							li.active(role='presentation')
								a(href='#data', role='tab', data-toggle='tab') 数据设置
							li(role='presentation')
								a(href='#header', role='tab', data-toggle='tab') 请求头设置
							li(role='presentation')
								a(href='#param', role='tab', data-toggle='tab') URL参数设置
							li(role='presentation')
						.tab-content
							#data.tab-pane.active(role='tabpanel')
								.row
									.col-md-12.form-group
										label.col-md-2.control-label(for='dkey') 数据：
										.col-md-10
											textarea.form-control(placeholder='请输入数据（Json）', ng-model='vm.data', rows='10')
							#header.tab-pane(role='tabpanel')
								.row(ng-repeat='header in vm.headers')
									.col-md-4.form-group
										.col-md-3.text-right
											label.control-label(for='hkey') 请求头：
										.col-md-9
											select.form-control(name='hkey', required='required', ng-model='header.key')
												option(value='Authorization') Authorization
												option(value='Accept') Accept
												option(value='Accept-encoding') Accept-encoding
												option(value='Cookie') Cookie
									.col-md-5.form-group
										.col-md-1.text-right
											label.control-label(for='hvalue') 值：
										.col-md-11
											input.form-control(type='text', name='hvalue', placeholder='请输入值', ng-model='header.value')
									.col-md-3
										button.btn.btn-danger(type='button', ng-click='vm.headers.splice($index,1);') 删除
								button.btn.btn-success(type='button', ng-click='vm.headers.push({});') 增加
							#param.tab-pane(role='tabpanel')
								.row(ng-repeat='param in vm.params')
									.col-md-4.form-group
										.col-md-1.text-right
											label.control-label(for='pkey') 键：
										.col-md-10
											input.form-control(type='text', name='pkey', placeholder='请输入键名', ng-model='param.key')
									.col-md-5.form-group
										.col-md-1.text-right
											label.control-label(for='pvalue') 值：
										.col-md-11
											input.form-control(type='text', name='pvalue', placeholder='请输入值', ng-model='param.value')
									.col-md-3
										button.btn.btn-danger(type='button', ng-click='vm.params.splice($index,1);') 删除
								button.btn.btn-success(type='button', ng-click='vm.params.push({});') 增加
							.tab-pane(role='tabpanel')
						.text-center
							input.btn.btn-primary(type='submit', name='submit', value='提交请求')
							input.btn.btn-default(type='reset', name='reset', value='重置')
			.panel.panel-primary(ng-if='vm.resHistory.length>0')
				.panel-heading
					| 请求历史详情[{{vm.resHistory.length}}]
					button.btn.btn-xs.btn-danger(ng-click='vm.resHistory.splice(0,vm.resHistory.length)') 清除历史
					a.pull-right(style='color:white;', data-toggle='collapse', href='#response')
						span.glyphicon.glyphicon-minus.pull-right
				#response.panel-collapse.collapse.in.panel-body
					#accordion.panel-group(role='tablist', aria-multiselectable='true')
						.panel(ng-repeat='res in vm.resHistory', ng-class="{'panel-info':res.response.status===200,'panel-danger':res.response.status!==200}")
							.panel-heading(role='tab', id='head{{$index}}')
								h4.panel-title.row
									.col-md-5
										a(data-toggle='collapse', data-parent='#accordion', href='#collapse{{$index}}', aria-expanded='true', aria-controls='collapse{{$index}}')
											| [{{res.response.req.method}}] {{res.response.req.url}}
									.col-md-6 状态码：{{res.response.status}}　时间：{{res.date}}
									.col-md-1
										button.btn.btn-xs.btn-danger(ng-click='vm.resHistory.splice($index,1)') 删除
							.panel-collapse.collapse.in(id='collapse{{$index}}', role='tabpanel', aria-labelledby='head{{$index}}')
								.panel-body
									ul.nav.nav-tabs.nav-pills(role='tablist')
										li.active(role='presentation')
											a(href='#resheader{{$index}}', role='tab', data-toggle='tab') 响应头
										li(role='presentation')
											a(href='#result{{$index}}', role='tab', data-toggle='tab') 响应消息
										li(role='presentation')
											a(href='#req{{$index}}', role='tab', data-toggle='tab') 请求信息
									.tab-content
										.tab-pane.active(role='tabpanel', id='resheader{{$index}}')
											table.table.table-striped.table-bordered.table-hover.table-condensed
												thead.text-center.text-primary
													tr
														td(style='width:30%;')
															strong Key
														td
															strong Value
												tbody
													tr(ng-repeat='(k,v) in res.response.header')
														td {{k}}
														td {{v}}
										.tab-pane(role='tabpanel', id='result{{$index}}')
											table.table.table-striped.table-bordered.table-hover.table-condensed
												tbody
													tr
														td {{res.response.text}}
										.tab-pane(role='tabpanel', id='req{{$index}}')
											table.table.table-striped.table-bordered.table-hover.table-condensed
												thead.text-center.text-primary
													tr
														td(colspan='2')
															| 请求头
													tr
														td(style='width:30%;')
															strong Key
														td
															strong Value
												tbody
													tr(ng-repeat='(k,v) in res.response.req.headers')
														td {{k}}
														td {{v}}
											table.table.table-striped.table-bordered.table-hover.table-condensed
												thead.text-center.text-primary
													tr
														td
															| 请求数据
												tbody
													tr
														td {{res.response.req.data}}
